<template>
    <div class="container shop-c">
        <page-table class="pt" :func="func" ref="pt" @updateStatis = "updateStatis"
		@selectChange="selectChange"	:props="{ref:'table'}"
        >
			<template v-slot:batchChange>
				<el-button type="danger" v-permission="'shop:batch'" :disabled="checkboxNoChange" @click="showRelevancy=true">批量操作</el-button>
			</template>
			<template v-slot:shopName="{data}" >
					{{data.row.shopName}}  <i class="el-icon-copy-document i" title="复制" @click="toCopy(data.row.shopName)"></i> 
					<br/> {{ data.row.relevancy }}
			</template>
			<template v-slot:moreoperation="{data}">
				<el-button type="primary" size="small" @click="shopMark(data.row)" style="margin-right: 10px;" v-permission="'bill:list'">{{data.row.priority == 1 ? '标注':'取消标注'}}</el-button> 
				<el-badge is-dot class="item" :hidden="!data.row.isNotGenUrl" v-permission="'shop:generate'">
					<el-button type="success" size="small" @click="build(data.row)">链接生成</el-button>
				</el-badge>
				<el-button type="warning" size="small" @click="shopEdit(data.row)" style="margin-left: 10px;" v-permission="'bill:list'">编辑账单</el-button>
			</template>
			<template v-slot:platform="{data}" >
					{{ TypeOptions.find(item=>item.value==data.row.platform)?.label }}
			</template>
			<template v-slot:statisCount="{data}">
				{{data.column.label}}({{ orderCount }})
			</template>
			<template v-slot:statisMoney="{data}">
				{{data.column.label}}({{ orderMoney }})
			</template>
        </page-table>
		<!-- <el-dialog
			v-model="showBuilder"
			title="链接生成"
			:visible.sync="showBuilder"
                width="30%"
				>
			<json-form :options="dateOptions" :form="current" ref="link"></json-form>
			<span slot="footer" class="dialog-footer">
                <el-button @click="showBuilder = false">取 消</el-button>
                <el-button type="primary" @click="confirmBuild">确 定</el-button>
            </span>	
		</el-dialog> -->

		<el-dialog
			v-model="showRelevancy"
			title="关联店铺"
			:visible.sync="showRelevancy"  width="30%" 	>
			<json-form :options="relevancyOptions" :form="relevancy" ref="relevancy"></json-form>
			<span slot="footer" class="dialog-footer">
                <el-button @click="showRelevancy = false">取 消</el-button>
                <el-button type="primary" @click="confirmRelevancy">确 定</el-button>
            </span>	
		</el-dialog> 
    </div>
</template>
<script>
import pageTable from "@/components/page-table.vue"
import func from "./index.js"
import { TypeOptions } from "../bill/constant"
import JsonForm from "@/components/json-form.vue"
import { getToDay } from "@/util/date"
import { getUrl,postPriority,postRelevancy } from "@/apis/shop"
export default {
	name:"shop",
	components:{
		pageTable,
		JsonForm
	},
	data(){
		return {
			func,
			TypeOptions,
			showBuilder:false,
			showRelevancy:false,
			checkboxNoChange:true,
	 

			dateOptions:[
				{
					key:"activeDate",
					label:"活动日期",
					type:"el-date-picker",
					props:{
						type:"date",
						format:"yyyy-MM-dd",
						"value-format":"yyyy-MM-dd"
					},
					required:true
				}
			],
			
			current:{
				activeDate:getToDay()
			},
			relevancyOptions:[
				{
					key:"relevancy",
					label:"关联店铺",
					type:"el-input", 
					//required:true
				}
			],
			relevancy:{
				relevancy:""
			},
			orderCount:0,
			orderMoney:0,
			 
		}
	},
	methods:{
		selectChange(checked){
			if(checked.length>0){
				this.checkboxNoChange = false
			}else{
				this.checkboxNoChange = true
			}
		},
		// 复制
		toCopy (item) { 
		 
			this.$copyText(item).then(res=>{
					console.log(res)
					this.$message.success("复制成功")
					// this.showBuilder = false
					row.isNotGenUrl = 0
				},err=>{
					console.log("复制失败",err)
					this.$message.error("复制失败")
				})
		},
		
		shopMark(row){ 
			postPriority(row.id).then(({data:r})=>{
				if(row.priority == 1){
					row.priority = 2
				}else{
					row.priority = 1
				}
			 
				 
			},error=>{
				console.log(error) 
				this.$message.error("操作失败",error)
			})
		},
		shopEdit(row){
			console.log(row)
			this.$router.push({
				path:"/shop/edit",
				query:{
					shopId:row.id,
					shopName:row.shopName
				}
			})
		},
		build(row){
			// this.showBuilder = true
			// this.current = row
			// this.current = {
			// shopName:row.shopName,
			// activeDate:getToDay()
			// }
			getUrl(row.id).then(({data:r})=>{
				let beforeEecode = r.url.replaceAll("+","$")
				console.log("beforeEncode",beforeEecode)
				let url = encodeURI(beforeEecode).replaceAll("$","%2B").replaceAll("(","%28").replaceAll(")","%29")
				let text = r.text.replace("{webAddress}",url)
				console.log(text)
				this.$copyText(text).then(res=>{
					console.log(res)
					this.$message.success("链接复制成功")
					// this.showBuilder = false
					row.isNotGenUrl = 0
				},err=>{
					console.log("复制失败",err)
					this.$message.error("链接复制失败")
				})
			},error=>{
				console.log(error)
				if(error.toString().includes("index")){
					this.$message.error("链接生成失败","该订单或已支付")
					return 
				}
				this.$message.error("链接生成失败",error)
			})
		},
		updateStatis(data){
			this.orderCount = data.orderCount
			this.orderMoney = data.orderMoney
		},
		 
		confirmBuild(){
			console.log(this.$refs)
			// this.$refs.link.submit(res=>{
			// console.log(res)
			// getUrl(res.shopName,res.activeDate).then(({data:r})=>{
			// 	let beforeEecode = r.url.replaceAll("+","$")
			// 	console.log("beforeEncode",beforeEecode)
			// 	let url = encodeURI(beforeEecode).replaceAll("$","%2B")
			// 	let text = r.text.replace("{webAddress}",url)
			// 	console.log(text)
			// 	this.$copyText(text).then(res=>{
			// 		console.log(res)
			// 		this.$message.success("链接复制成功")
			// 		this.showBuilder = false
			// 	},err=>{
			// 		console.log("复制失败",err)
			// 		this.$message.error("链接复制失败")
			// 	})
			// },error=>{
			// 	console.log(error)
			// 	if(error.toString().includes("index")){
			// 		this.$message.error("链接生成失败","该订单或已支付")
			// 		return 
			// 	}
			// 	this.$message.error("链接生成失败",error)
			// })
			// })
		},
		confirmRelevancy(){
			console.log(this.$refs)
			this.$refs.relevancy.submit(form=>{
					let ids = this.$refs.pt.checkboxSelected.map(item=>item.id)
					let dto = {
						...form,
						ids
					}
					
					console.log(dto)
					postRelevancy(dto).then(res=>{
								console.log("d2")
						if(res.data){
							//success("操作成功")
							this.showRelevancy = false
								console.log("d")
							this.$refs.pt.checkboxSelected.forEach(item=>{
								item.relevancy =  form.relevancy
							})
									console.log("4d")
							console.log(this.showRelevancy)
							this.$refs.pt.checkboxSelected = []
									console.log("d6")
							this.$refs.pt.$refs.table.clearSelection()
						}
					})
				})
 
		}
	}
}
</script>
<style scoped>
/deep/ .el-badge__content.is-fixed.is-dot {
    right: 14px;
    top: 5px;
}

</style>
<style>
.picker-popper .el-date-table__row .badge::after {
  position: absolute;
  content: "";
  left: 17px;
  bottom: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #e53c61;
}
.i {
  cursor: pointer;
  font-size: 20px;
  margin-left: 10px;
  color: red;
}
</style>